<template>
  <layout :showBg="false">
    <template #header>
      <pageHead :title="type == 1 ? '已结算订单' : '待结算订单'" />
    </template>
    <view class="content">
      <view
        :class="{ 'width-border': this.date }"
        class="brief flex flex-bt fs-32"
      >
        <view>
          <text class="c-60">总计：</text>
          <text class="c-90">￥{{ total }}</text>
        </view>
        <view class="filter fs-28 c-90" @click="isShowFilter = true">
          {{ date }}
        </view>
      </view>
      <scroll-view
        :style="statusBarHeight"
        class="list scroll-view"
        :scroll-y="true"
        @scroll="onScroll"
        @scrolltolower="onScrollBottom"
        v-if="list.length"
      >
        <view v-for="(item, i) in list" :key="i" class="item">
          <view
            :data-date="item.date"
            :data-id="i"
            class="target-element date c-90"
          >
            <view class="num flex flex-bt flex-a">
              <view class="flex flex-a">
                <image
                  src="../../../assets/images/wallet/coin.png"
                  style="margin-right: 16rpx; width: 40rpx;height: 40rpx;"
                ></image>
                <text class="fs-32 c-60">结算金额</text>
              </view>
              <text class="fs-24 refound c-90" v-if="item.refundMoney !== 0 && item.totalIncome === 0 && query.settleStatus === 0">已退款</text>
              <text class="fs-32 bold c-90" v-else>{{item.originalIncome || item.totalIncome}}</text>
            </view>
            <view class="name fs-32 c-90 ellipsis-2">{{ item.taskName }}</view>
            <view class="dt dt-1 c-40 fs-24">订单时间 {{ item.incomeTime }}</view>
            <view class="dt c-40 fs-24">结算时间 {{ item.settleTime }}</view>
          </view>
        </view>
      </scroll-view>
      <Empty v-if="!list.length && !isLoading"> </Empty>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { statusBarHeight } from "../../../assets/utils/config.js";
import { orderList, orderStatistics } from "../../../api/orders";
import Empty from "../../../compennts/empty/index.vue";
export default {
  components: {
    layout,
    pageHead,
    Empty,
  },
  data() {
    return {
      statusBarHeight,
      title: "已结算订单",
      type: 1,
      total: 0,
      date: "",
      isLoading: true,
      isShowFilter: false,
      withBorder: false,
      list: [],
      query: {
        pageNum: 1,
        pageSize: 20,
        settleStatus: 0, //结算状态;0待结算1已结算
      },
    };
  },

  onLoad(d) {
    console.log(d);
    this.type = d.type;
    if (this.type == 1) {
      this.query.settleStatus = 1;
    } else {
      this.query.settleStatus = 0;
    }
  },
  mounted() {
    this.getOrders();
    this.getTotal();
  },
  onPageScroll({ scrollTop }) {
    console.log(scrollTop);
  },
  methods: {
    getTotal() {
      orderStatistics(this.query.settleStatus).then((res) => {
        console.log(res);
        this.total = res.data || 0;
      });
    },
    getOrders(isMore) {
      this.isLoading = true;
      orderList(this.query)
        .then((res) => {
          console.log(res);
          if (isMore) {
            this.list = [...this.list, ...res.rows];
          } else {
            this.list = res.rows;
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    onScroll(e) {
      // const query = uni.createSelectorQuery().in(this);
      // query
      //   .selectAll(".target-element")
      //   .boundingClientRect((data) => {
      //     data.forEach((item) => {
      //       const top = parseInt(this.statusBarHeight) + 106;
      //       if (item.top < top) {
      //         this.date = item.dataset.date + "月";
      //       }
      //       if (item.top >= top && item.dataset.id == 0) {
      //         this.date = "";
      //       }
      //     });
      //   })
      //   .exec();
    },
    onScrollBottom() {
      this.query.pageNum++;
      this.getOrders(true);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
@statusbarheight:var (--statusBarHeight);
.content {
  //   padding: 0 32rpx 32rpx 32rpx;
  background: #f7f8ff;
  height: 100%;
  overflow: hidden;
  .brief {
    padding: 32rpx;
    position: sticky;
    top: 0;
    background: #f7f8ff;
    z-index: 999;
    height: 56px;
    width: 100%;
  }
  .width-border {
    border-bottom: 1px solid #e9e9ea;
  }
}
.target-element{
  border-bottom: 1px solid #E9E9EA;
  &:nth-last-child(1){
    border: 0;
  }
  padding-bottom: 32rpx;
  .num{
    margin-bottom: 12rpx;
  }
  .name{
    margin-bottom: 8rpx;
  }
  .dt-1{
    margin-bottom:8rpx;
  }
}
.scroll-view {
  height: calc(100vh - 300rpx);
  border-radius: 16rpx;
  padding: 0 32rpx;
  overflow: hidden;
  .item {
    background: #ffffff;
    padding: 32rpx 32rpx 0 32rpx;
    .date {
      .num {
        font-size: 48rpx;
        .refound{
          color:#fc1313;
        }
      }
      .unit {
        margin: 0 10rpx 0 4rpx;
      }
    }
    &:nth-child(1) {
      border-radius: 16rpx 16rpx 0 0;
    }

    .list-item {
      border-bottom: 1px solid #e9e9ea;
      margin-top: 24rpx;
      padding-top: 8rpx;
      padding-bottom: 32rpx;
      image {
        width: 46rpx;
        height: 41rpx;
        margin-right: 6rpx;
      }
      .name {
        margin-top: 8rpx;
      }
      .dt {
        margin-top: 8rpx;
      }
    }
  }
}
</style>
